/* ---------------------- VARIABLES ---------------------- */

var isMousePressed = false;
var firstX, firstY;
var lastX, lastY;
var canvas, ctx;
var canvasHelper, ctxHelper;
var selectedTool = 'none';
var mousePos = null;
var selectedArea = null;

/* ---------------------- CONSTANTS ---------------------- */

var TOOL_NONE = 'none',
TOOL_LAPIS = 'lapis',
TOOL_LINHA = 'linha',
TOOL_RETANGULO = 'retangulo',
TOOL_CIRCULO = 'circulo',
TOOL_TEXTO = 'texto',
TOOL_AREA = 'area';

/* ------------------------ INIT ------------------------- */

function init() {

	/* Get canvas and contexts */
    canvas = document.getElementById('paintWindow');
    ctx = canvas.getContext('2d');
    
    canvasHelper = document.getElementById('paintHelper');
    ctxHelper = canvasHelper.getContext('2d');
    
    /* Set cursor to crosshair */
	$(canvas).css('cursor','crosshair');
	$(canvasHelper).css('cursor','crosshair');
	
	/* Select default tool */
	selectedTool = TOOL_LAPIS;
		
	/* Change selected tool */
    $(".tool").click(function()
	{
		$(".tool").removeClass("active");
		$(this).addClass("active");
	});
    
    /* Set canvas on top */
    $(".tool").click(function()
	{
		if (selectedTool == TOOL_RETANGULO ||
			selectedTool == TOOL_CIRCULO ||
			selectedTool == TOOL_LINHA ||
			selectedTool == TOOL_AREA) {
			
			canvasHelperOnTop(true);
			
		} else {
			
			canvasHelperOnTop(false);
		}
	});
    
    /* Add mouse events */    
    canvas.addEventListener('mousemove', function(e) {ev_mousemove(e)}, false);
    canvas.addEventListener('mousedown', function(e) {ev_mousedown(e)}, false);
    canvas.addEventListener('mouseup', function(e) {ev_mouseup(e)}, false);
    canvas.addEventListener('mouseout', function(e) {ev_mouseout(e)}, false);
    canvas.addEventListener('mouseenter', function(e) {ev_mouseenter(e)}, false);
    
    canvasHelper.addEventListener('mousemove', function(e) {ev_mousemove(e)}, false);
    canvasHelper.addEventListener('mousedown', function(e) {ev_mousedown(e)}, false);
    canvasHelper.addEventListener('mouseup', function(e) {ev_mouseup(e)}, false);
    canvasHelper.addEventListener('mouseout', function(e) {ev_mouseout(e)}, false);
    canvasHelper.addEventListener('mouseenter', function(e) {ev_mouseenter(e)}, false);
}

/* -------------------------- UTIL -------------------------- */

function selectTool(tool)
{	
	selectedTool = tool;
}

function canvasHelperOnTop(helperOnTop) {
	
	if (helperOnTop) 
	{
		$('#paintHelper').css( "zIndex", 1);
		$('#paintWindow').css( "zIndex", 0);
		
	} else {
		
		/* Clear helper */
		ctxHelper.setTransform(1, 0, 0, 1, 0, 0);
		ctxHelper.clearRect(0, 0, canvas.width, canvas.height);
		
		$('#paintWindow').css( "zIndex", 1);
		$('#paintHelper').css( "zIndex", 0);
	}
}

function commitHelper () 
{
	/* Copy from helper */
	ctx.drawImage(canvasHelper, 0, 0);
	
	/* Clear helper */
	ctxHelper.setTransform(1, 0, 0, 1, 0, 0);
	ctxHelper.clearRect(0, 0, canvas.width, canvas.height);
}

function getMousePos(canvas, evt) 
{
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

/* ---------------------- MOUSE EVENTS ---------------------- */

function ev_mousemove(e) 
{
	mousePos = getMousePos(canvas, e);
	
	$('#mousePos').text("X: " + mousePos.x + " Y: " + mousePos.y);
	
	if (isMousePressed) {
		
		if (selectedTool == TOOL_LAPIS) {
			
			lapis(mousePos.x, mousePos.y, true);
			
		} else if (selectedTool == TOOL_LINHA) {
			
			drawLine(mousePos.x, mousePos.y, true);
			
		} else if (selectedTool == TOOL_RETANGULO) {
						
			drawRetangle(mousePos.x, mousePos.y);
			
		} else if(selectedTool == TOOL_CIRCULO){
			
			drawOval(mousePos.x, mousePos.y);
			
		} else if(selectedTool == TOOL_AREA){
			
			drawSelection(mousePos.x, mousePos.y);
		}
	}
	
	console.log('Mouse Move');
}

function ev_mousedown(e) 
{
	isMousePressed = true;
	
	firstX = mousePos.x;
	firstY = mousePos.y;
	
	if (selectedTool == TOOL_LAPIS) 
	{	
		lapis(mousePos.x, mousePos.y, false);
		
	} else if (selectedTool == TOOL_LINHA) {
		
		drawLine(mousePos.x, mousePos.y, false);
		
	} else if (selectedTool == TOOL_TEXTO) {
		
		text(mousePos.x, mousePos.y, true);
		
	} else if (selectedTool == TOOL_AREA) {
		
		drawSelection(mousePos.x, mousePos.y);
	}
		
	console.log('Mouse Down');
}

function ev_mouseup(e) 
{
	
	isMousePressed = false;
	
	if (selectedTool == TOOL_LINHA ||
		selectedTool == TOOL_RETANGULO ||
		selectedTool == TOOL_CIRCULO)
	{
		
		commitHelper();
		
	} else if (selectedTool == TOOL_TEXTO) {

		text(mousePos.x, mousePos.y, false);
		
	} else if (selectedTool == TOOL_AREA) {
		
		
		
	}
	
}

function ev_mouseout(e) 
{
	$('#mousePos').text("X: - Y: -");
	
	console.log('Mouse Out');
}

function ev_mouseenter(e) 
{
	console.log('Mouse Enter');
}

/* ---------------------- TOOLS FUNCTIONS ---------------------- */

function lapis(x, y, isMoving) 
{
	if (isMoving) 
	{
	    ctx.beginPath();
	    ctx.strokeStyle = $('#colourBox').val();
	    ctx.lineWidth = $('#lineWidth').val();
	    ctx.lineJoin = "round";
	    ctx.moveTo(lastX, lastY);
	    ctx.lineTo(x, y);
	    ctx.closePath();
	    ctx.stroke();
	}
	
    lastX = x; 
    lastY = y;
    
    console.log('Brushing...');
}

function drawLine(x, y, isMoving)
{

	if(isMoving){
		
		ctxHelper.clearRect(0,0,canvasHelper.width,canvasHelper.height);
		ctxHelper.beginPath();
		ctxHelper.lineWidth = $('#lineWidth').val();
		ctxHelper.strokeStyle= $('#colourBox').val();
		ctxHelper.lineJoin = "round";
		ctxHelper.moveTo(lastX, lastY);
		ctxHelper.lineTo(x, y);
		ctxHelper.closePath();
		ctxHelper.stroke();
		
	} else {
		
	    lastX = x;
	    lastY = y;
	}
	
	console.log('Line');
};

function drawRetangle(x, y) 
{
	if(isMousePressed){
		
		ctxHelper.clearRect(0,0,canvasHelper.width,canvasHelper.height);
		ctxHelper.beginPath();
		ctxHelper.lineWidth = $('#lineWidth').val();
		ctxHelper.fillStyle= $('#colourBox').val();
		ctxHelper.strokeStyle= $('#colourBoxStroke').val();
		ctxHelper.rect(firstX,firstY, x - firstX, y - firstY);
		ctxHelper.stroke();
		ctxHelper.fill();
	}
	
	console.log('Retangle');
};

function drawOval(x, y) 
{
	if (isMousePressed) {
		ctxHelper.clearRect(0, 0, canvasHelper.width, canvasHelper.height);
		ctxHelper.beginPath();
		ctxHelper.lineWidth = $('#lineWidth').val();
		ctxHelper.strokeStyle= $('#colourBoxStroke').val();
		ctxHelper.fillStyle = $('#colourBox').val();
		ctxHelper.moveTo(firstX, firstY + (y - firstY) / 2);
		ctxHelper.bezierCurveTo(firstX, firstY, x, firstY, x, firstY + (y - firstY) / 2);
		ctxHelper.bezierCurveTo(x, y, firstX, y, firstX, firstY + (y - firstY) / 2);
		ctxHelper.closePath();
		ctxHelper.fill();
		ctxHelper.stroke();
	}
	console.log('Circle');
};	

function text(x, y, isFirst) 
{

	if (!isFirst) 
	{
		var resposta = window.prompt('Digite o texto desejado')
		
		if (resposta)
		{
			ctx.font =  $('#fontSize').val()+"px " + $('#fontType').val();
			ctx.fillStyle = $('#colourBox').val();
		    ctx.strokeStyle = $('#colourBoxStroke').val();
//		    ctx.lineWidth = $('#lineWidth').val();
			ctx.fillText(resposta, lastX, lastY);
			ctx.strokeText(resposta, lastX, lastY);
		}	
	} else {
		
		lastX = x;
		lastY = y;
		
	}
}

function drawSelection(x, y) {
	
	if(isMousePressed){
		
		ctxHelper.clearRect(0,0,canvasHelper.width,canvasHelper.height);
		ctxHelper.beginPath();
	    ctxHelper.globalAlpha=0.4;
		ctxHelper.fillStyle= '#1AFF87';
		ctxHelper.rect(firstX,firstY, x - firstX, y - firstY);
		ctxHelper.fill();
	    ctxHelper.globalAlpha=1;
	}
	
	console.log('Selection');
}


function clearCanvas() 
{
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}